<!--模拟百度换肤功能-->
<!--by:无痕 2015/7/7-->
<!--本人QQ:2632790902-->
<!--此资源仅供技术交流，不得作其它用途，使用产生的一切后果与本人无关-->
<!--鸣谢：Arry老师-->

<!doctype html>
<html>
	<head>
		<!--设置页面编码为utf-8-->
		<meta charset="UTF-8">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>我的皮肤</title>

		<!--CSS样式-->
		<style type="text/css">
			*{margin:0;padding:0}
			.choose{position:absolute;left:0;top:0;width:100%;height:300px;background:#fff;z-index:2;display:none;
				padding-top:15px;
				/*主流浏览器兼容的透明*/
				filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
			.choose .preview{margin:0 auto;width:750px;background:#ccc}
			.choose .preview .one,.three{float:left;width:250px}
			.choose .preview .two,.four{float:left;width:125px}
			
			.choose .preview div a{display:black;margin:0;padding:0;float:left;}
			.choose .preview div a:hover{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6;opacity: 0.6;}
			.choose .preview div a img{border:1px solid #fff;margin:0;padding:0;float:left;}

			.shade{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;z-index:1;display:none;
				filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
		</style>
	</head>

	<body>
	
	<a id="c" href="#">一键换肤</a>
		<!--皮肤选择面板 start-->
		<div class="choose">
			<div class="preview">
				<div class="one">
					<a href="#"><img src="images/1-1.jpg" width="247" height="151" /></a>
					<a href="#"><img src="images/2-2.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/3-3.jpg" width="123" height="75" /></a>
				</div>
				<div class="two">
					<a href="#"><img src="images/4-4.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/5-5.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/6-6.jpg" width="123" height="75" /></a>
				</div>
				<div class="three">
					<a href="#"><img src="images/7-7.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/8-8.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/9-9.jpg" width="247" height="151" /></a>
				</div>
				<div class="four">
					<a href="#"><img src="images/10-10.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/11-11.jpg" width="123" height="75" /></a>
					<a href="#"><img src="images/12-12.jpg" width="123" height="75" /></a>
				</div>
			</div>
		</div>
		<!--end 皮肤选择面板-->
		
		<!--遮罩层-->
		<div class="shade"></div>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				/*一键换肤标签单击事件*/
				$("#c").click(function(){
					$(".choose,.shade").toggle(500);
				});

				/*单击遮罩层隐藏皮肤选择面板*/
				$(".shade").click(function(){
					$(".choose,.shade").toggle(500);
				});

				/*选择图片时*/
				$(".choose .preview div a").click(function(){
					//根据略缩图文件名获取完整图片文件名
					var src=$(this).find("img").attr("src").replace(/-\d*/ig,'');
					//设置背景
					$("body").css("background","url("+src+")");
					//将图片路径储存到session域，以便数据持久化
					sessionStorage.setItem("src",src);
				});
				
				
				var src;
				try{
					//从session域获取持久化图片地址
					src=sessionStorage.getItem("src");
					$("body").css("background","url("+src+")");
				}catch(err){
					//默认背景
					$("body").css("background","url('images/1.jpg')");
				}
			});
		</script>
	</body>
</html>
